<script>
export default {
  data() {
    return {
      currentTime: '',
      currentDate: '',
      gridList: [

        {
          icon: '/static/home/prawa.png',
          text: '驾驶理论学习',
          url: '/pages/prawa/index'
        },
        {
          icon: '/static/home/ocr.png',
          text: 'OCR识别',
          url: '/pages/ocr/index'
        },
        {
          icon: '/static/home/translation.png',
          text: '多语言翻译',
          url: '/pages/translation/index'
        },
        {
          icon: '/static/home/jisuanqi.png',
          text: '计算器',
          url: '/pages/calculator/index'
        },
        {
          icon: '/static/home/bizhi.png',
          text: '壁纸',
          url: '/pages/wallpaper/index'
        },
        {
          icon: '/static/home/pdf.png',
          text: 'PDF工具',
          url: '/pages/pdf/index'
        }
      ]
    }
  },
  methods: {
    updateTime() {
      const now = new Date();
      // 北京时间格式
      this.currentTime = now.toLocaleTimeString('zh-CN', { 
        hour12: false,
        timeZone: 'Asia/Shanghai'
      });
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        timeZone: 'Asia/Shanghai'
      });
    },
    onItemClick(item) {
      uni.navigateTo({
        url: item.url
      });
    }
  },
  created() {
    this.updateTime();
    // 每秒更新一次时间
    setInterval(() => {
      this.updateTime();
    }, 1000);
  }
}
</script>

<template>
  <view class="container">
    <!-- 时间显示卡片 -->
    <view class="time-box">
      <view class="time-box-item">
        <view class="time">{{ currentTime }}</view>
        <view class="date">{{ currentDate }}</view>
      </view>
      <view class="beijing-label">北京时间</view>
    </view>
    
    <!-- 工具宫格 -->
    <view class="section-title">工具箱</view>
    <view class="grid-container">
      <view class="grid-wrapper">
        <view 
          class="grid-item" 
          v-for="(item, index) in gridList" 
          :key="index"
          @click="onItemClick(item)"
        >
          <view class="grid-icon">
            <image :src="item.icon" mode="aspectFit"></image>
          </view>
          <view class="grid-text">{{ item.text }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container{
  width: 100vw;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 30rpx;
  box-sizing: border-box;
}
/* 时间显示样式 */
.time-box{
  width: 100%;
  height: 200rpx;
  background: linear-gradient(135deg, #5A87FE, #6E9AFF);
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  color: #fff;
  position: relative;
  box-shadow: 0 10rpx 20rpx rgba(90, 135, 254, 0.2);
}
.time-box-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.time {
  font-size: 60rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.date {
  font-size: 28rpx;
  opacity: 0.9;
}
.beijing-label {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 20rpx;
  font-size: 24rpx;
}
/* 工具宫格样式 */
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin: 40rpx 0 20rpx 10rpx;
}
.grid-container {
  margin-top: 20rpx;
}
.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grid-item {
  width: 31%;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(90, 135, 254, 0.1);
  transition: all 0.2s;
  border: 1px solid rgba(90, 135, 254, 0.1);
}
.grid-item:active {
  transform: scale(0.96);
  background-color: rgba(90, 135, 254, 0.05);
}
.grid-icon {
  width: 90rpx;
  height: 90rpx;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(90, 135, 254, 0.1);
  border-radius: 50%;
  padding: 15rpx;
}
.grid-icon image {
  width: 80%;
  height: 80%;
}
.grid-text {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}
</style>